<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画过渡实验</title>
    <script src="https://unpkg.com/vue@3.2.0"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
</head>
<style>
#main {
    width: 300px; 
    position: relative;
    left: 50%;
    transform: translate(-50%);
} 
#main ul{
    background: rgb(155, 171, 218);
}
</style>
<body>
    <!-- 199010127 吴金昔 -->
    <div id="main">
        <div class="title">
            <button @Click="isShow">主页</button>
        </div>
        <transition
        enter-active-class="animate__animated animate__bounceInDown"
        leave-active-class="animate__animated animate__zoomOutDown">
            <ul v-if="show">
                <li>经典课程</li>
                <ul>
                    <li><a href="#">Python 开发课程</a></li> 
                    <li><a href="#">Java 开发课程</a></li> 
                    <li><a href="#">网站前端开发课程</a></li>
                </ul>
                <li>热门技术</li> 
                <ul> 
                    <li><a href="#">前端开发技术</a></li> 
                    <li><a href="#">网络安全技术</a></li> 
                    <li><a href="#">PHP 开发技术</a></li> 
                </ul> 
                <li>畅销教材</li> 
                <ul> 
                    <li><a href="#">网站前端开发教材</a></li> 
                    <li><a href="#">C 语言入门教材</a></li> 
                    <li><a href="#">Python 开发教材</a></li> 
                </ul> 
                <li>联系我们</li>
            </ul>
        </transition>
    </div>
</body>
<script>
    Vue.createApp({
        setup(){
            const {ref} = Vue
            let show = ref(true)
            const isShow = () => {
                show.value = !show.value
            }
            return{
                show,
                isShow
            }
        }
    }).mount("#main")
</script>
</html>